<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=8">
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <title>my Box</title>
    <link rel="stylesheet" href="./swiper.min.css">
</head>
<style>
html,
body {
    height: 100%;
    max-width: 100%;
    margin: 0;
    overflow: hidden;
    /*background: url(http://i68.tinypic.com/2i7bc07.jpg) no-repeat;*/
    background-size: cover;
    image-rendering: pixelated;
    font-family: sans-serif;
    background: #000;
    font-family:"Times New Roman",Georgia,Serif;
}

#space {
    width: 100%
}

#warp {
    position: absolute;
    z-index: 9;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 20px auto;
    color: rgba(209, 255, 255, 1);
    border: 2px solid;
    padding: 1em;
    width: 10em;
    text-align: center;
    font-weight: 700;
    font-size: 1.2em;
    display: inline-block;
    text-decoration: none;
    background: rgba(0, 0, 0, 0.8)
}

.starBtn {
    position: absolute;
    bottom: 50px;
    left: 50%;
    margin-left: -80px;
    width: 160px;
    height: 48px;
    /*border: 1px solid #fff;
    color: #fff;*/
    font-size: 18px;
    line-height: 48px;
    text-align: center;
    cursor: pointer;
}

.popMessage {
    position: absolute;
    width: 600px;
    height: 320px;
    border: 1px solid #fff;
    top: 20%;
    left: 50%;
    margin-left: -300px;
}

.swiper-container {
    position: relative;
    color: #fff;
    overflow: hidden;
}

.swiper-slide {
    text-align: justify;
    margin: 40px 60px;
    color: #fff;
    font-size: 16px;
    width: 480px!important;
    line-height: 40px;
    height: 240px;
    display:table;
}
.swiper-slide span
{
	display:table-cell;
	vertical-align:middle;
	text-align: center;
}

</style>

<body>
    <canvas id="space"></canvas>
    <div class="popMessage">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <!--  <div class="swiper-slide">Slide 1</div>
                <div class="swiper-slide">Slide 2</div>
                <div class="swiper-slide">Slide 3</div>
                <div class="swiper-slide">Slide 4</div>
                <div class="swiper-slide">Slide 5</div>
                <div class="swiper-slide">Slide 6</div>
                <div class="swiper-slide">Slide 7</div>
                <div class="swiper-slide">Slide 8</div>
                <div class="swiper-slide">Slide 9</div>
                <div class="swiper-slide">Slide 10</div> -->
            </div>
            <!-- Add Pagination -->
            <!-- <div class="swiper-pagination"></div> -->
        </div>
    </div>
    <div class="starBtn">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 160 48">
            <style type="text/css">
            @keyframes marchingants {
                0% {
                    stroke-dasharray: 160 600;
                    stroke-dashoffset: -460;
                    stroke-width: 4px;
                }
                100% {
                    stroke-dasharray: 600;
                    stroke-dashoffset: 0;
                    stroke-width: 2px;
                    stroke: #3F51B5;
                }
            }
            
            rect#strokedrect {
                stroke: #fff;
                fill: transparent;
                stroke-width: 7;
                /*stroke-dasharray: 160 600;*/
                animation: marchingants 1s forwards infinite linear;
            }
            
            text {
                letter-spacing: 5px;
            }
            </style>
            <rect id="strokedrect" x="0" y="0" width="160" height="48" />
            <text x="45" y="25" fill="white">START</text>
        </svg>
    </div>
</body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="./swiper.min.js"></script>
<script>
//based on an Example by @curran
window.requestAnimFrame = (function() {
    return window.requestAnimationFrame
})();
var canvas = document.getElementById("space");
var c = canvas.getContext("2d");

var numStars = 1900;
var radius = '0.' + Math.floor(Math.random() * 9) + 1;
var focalLength = canvas.width * 2;
var warp = 0;
var centerX, centerY;

var stars = [],
    star;
var i;

var animate = true;

initializeStars();

function executeFrame() {

    if (animate)
        requestAnimFrame(executeFrame);
    moveStars();
    drawStars();
}

function initializeStars() {
    centerX = canvas.width / 2;
    centerY = canvas.height / 2;

    stars = [];
    for (i = 0; i < numStars; i++) {
        star = {
            x: Math.random() * canvas.width,
            y: Math.random() * canvas.height,
            z: Math.random() * canvas.width,
            o: '0.' + Math.floor(Math.random() * 99) + 1
        };
        stars.push(star);
    }
}

function moveStars() {
    for (i = 0; i < numStars; i++) {
        star = stars[i];
        star.z--;

        if (star.z <= 0) {
            star.z = canvas.width;
        }
    }
}

function drawStars() {
    var pixelX, pixelY, pixelRadius;

    // Resize to the screen
    if (canvas.width != window.innerWidth || canvas.width != window.innerWidth) {
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        initializeStars();
    }
    if (warp == 0) {
        c.fillStyle = "rgba(0,10,20,1)";
        c.fillRect(0, 0, canvas.width, canvas.height);
    }
    c.fillStyle = "rgba(209, 255, 255, " + radius + ")";
    for (i = 0; i < numStars; i++) {
        star = stars[i];

        pixelX = (star.x - centerX) * (focalLength / star.z);
        pixelX += centerX;
        pixelY = (star.y - centerY) * (focalLength / star.z);
        pixelY += centerY;
        pixelRadius = 1 * (focalLength / star.z);

        c.fillRect(pixelX, pixelY, pixelRadius, pixelRadius);
        c.fillStyle = "rgba(209, 255, 255, " + star.o + ")";
        //c.fill();
    }
}

// document.getElementById('warp').addEventListener("click", function(e) {
//   window.c.beginPath();
//   window.c.clearRect(0, 0, window.canvas.width, window.canvas.height);
//   window.warp = warp ? 0 : 1;
//   executeFrame();
// });

executeFrame();

$(function() {
    $.getJSON('https://holidaying.github.io/SVG-demo/svg-base/text.json').then(function(data) {
        for (var i = 0; i < data.message.length; i++) {
            $(".swiper-wrapper").append('<div class="swiper-slide"><span>' + data.message[i].poetry + '</span></div>');
        }
        swiperCreate();
    })
});

function swiperCreate() {
    var swiper = new Swiper('.swiper-container', {
        centeredSlides: true,
        paginationClickable: true,
        loop : true,
        effect : 'coverflow',
    });
    swiper.lockSwipes();
    $(".starBtn").on("click",function(){
    	swiper.unlockSwipes();
    	swiper.slideNext(function(){
    		swiper.lockSwipes();
    	});
    })
}
</script>

</html>
